<!doctype html>
<html>
    <head>
        <script type="text/javascript">

            var cursor,
                    $ = function (id) {
                        return document.getElementById(id);
                    },
                    nl2br = function (txt) {
                        return txt.replace(/\n/g, "<br />");
                    },
                    writeit = function (from, e) {
                        e = e || window.event;
                        var w = $("writer");
                        var tw = from.value;
                        w.innerHTML = nl2br(tw);
                    },
                    moveIt = function (count, e) {
                        e = e || window.event;
                        var keycode = e.keyCode || e.which;
                        if (keycode == 37 && parseInt(cursor.style.left) >= (0 - ((count - 1) * 10))) {
                            cursor.style.left = parseInt(cursor.style.left) - 10 + "px";
                        } else if (keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0) {
                            cursor.style.left = parseInt(cursor.style.left) + 10 + "px";
                        }

                    };

            window.onload = function () {
                cursor = $("cursor");
                cursor.style.left = "0px";
            };

        </script>

        <style type="text/css">
            body{margin: 0px;padding: 0px;height: 99%;}
            textarea#setter{left: -1000px;position: absolute;}
            .cursor{font-size: 12px;background-color: red;color: red;position: relative;opacity: 0.5;}
            #terminal{margin: 8px;cursor: text;height: 500px;overflow: auto;}
            #writer{font-family: cursor, courier;font-weight: bold;}
            #getter{margin: 5px;}
        </style>
    </head>
    <body>
        <div id="terminal" onclick="$('setter').focus();">
            <textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>
            <div id="getter">
                <span id="writer"></span><b class="cursor" id="cursor"></b>
            </div>
        </div>
    </body>
</html>
